<template>
  <div class="employee-container">
    <div class="left">
      <!-- 搜索框 -->
      <div class="l-search">
        <el-input
          v-model="form.keyword"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          @input="keywordChange"
        />
      </div>
      <!-- 搜索框结束 -->
      <!-- 树桩结构 -->
      <div class="l-tree">
        <el-tree ref="treeRef" :data="data" :props="defaultProps" default-expand-all :expand-on-click-node="false" highlight-current node-key="id" @current-change="currentChange" />
      </div>
      <!-- 树桩结构结束 -->
    </div>
    <div class="right">
      <div class="r-btns">
        <!-- 按钮样式 -->
        <el-row type="flex" justify="end">
          <el-button size="mini" type="primary" @click="addEmployee">添加员工</el-button>
          <el-button size="mini" @click="importExcel">excel导入</el-button>
          <el-button size="mini" @click="exportExcel">excel导出</el-button>
        </el-row>
        <!-- 按钮样式结束 -->
        <!-- 表单样式 -->
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <!-- 头像  align="center"居中-->
            <el-table-column
              prop="staffPhoto"
              width="100"
              align="center"
            >
              <!-- 方法一
            <template v-slot="{ row }">
                <el-avatar
                  :size="60"
                  :src="row.staffPhoto"
                >
                  <img src="../../assets/common/head.jpg">
                </el-avatar>
              </template>
            -->
              <!-- 方法二 -->
              <template v-slot="{ row }">
                <!-- 有头像就用头像 -->
                <el-avatar
                  v-if="row.staffPhoto"
                  size="large"
                  :src="row.staffPhoto"
                />
                <!-- 如果没有头像就是默认姓 row.username?.charAt(0)-->
                <div v-else class="avatar-parent">
                  <span class="avatar-span">{{ row.username?.charAt(0) }}</span>
                </div>
              </template>
            </el-table-column>
            <!-- 头像结束 -->
            <!-- 姓名 -->
            <el-table-column
              prop="username"
              label="姓名"
            />
            <!-- 手机号 -->
            <el-table-column
              prop="mobile"
              label="手机号"
            />
            <!-- 工号 -->
            <el-table-column
              prop="workNumber"
              label="工号"
            />
            <!-- 聘用形式 -->
            <el-table-column
              prop="formOfEmployment"
              label="聘用形式"
            >
              <template v-slot="{ row }">
                <span>{{ row.formOfEmployment === 1 ? '正式' : '非正式' }}</span>
              </template>
            </el-table-column>
            <!-- 聘用结束 -->
            <!-- 部门 -->
            <el-table-column
              prop="departmentName"
              label="部门"
            />
            <!-- 入职时间 -->
            <el-table-column
              prop="timeOfEntry"
              label="入职时间"
            />
            <!-- 操作 -->
            <el-table-column
              prop="mobile"
              label="操作"
              width="180"
            >
              <template v-slot="{ row }">
                <el-button type="text" size="small" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
                <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="confirm(row.id)"
                >
                  <el-button slot="reference" type="text" size="small">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 表单样式结束 -->
        <!-- 分页开始 -->
        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          :current-page="form.page"
          :page-size="form.pagesize"
          @current-change="handleCurrentChange"
        />
        <!-- 分页结束 -->
      </div>
    </div>
    <!-- 导入弹窗 子传父所以用了sync-->
    <importExcel
      :show-excel-dialog.sync="showDialog"
      @upload-succes="getEmployeeList"
    />
    <!-- 分配角色的弹窗 -->
    <el-dialog title="分配角色" :visible.sync="showRoleDialog" :append-to-body="true" @close="close">
      <el-form ref="ruleForm">
        <el-checkbox-group v-model="roleIds">
          <el-checkbox
            v-for="item in roleList"
            :key="item.id"
            :label="item.id"
          >
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <el-form-item label-width="150px">
          <el-button type="primary" @click="roleIdAssign">确定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { companyDepartmentRequest } from '@/api/department'
import { transformListToTree } from '@/utils'
import { getEmployeeListRequest, userExportRequest, deleteEmployeeRequest, getEmployeeInfoRequest, assignRolesRequest } from '@/api/employee'
import { getRoleListRequest } from '@/api/role'
import { debounce } from 'lodash-es' // 节流 throttle  克隆/深拷贝 cloneDeep
// 导入导出的包
import { saveAs } from 'file-saver'
// 弹窗
import importExcel from './components/import-excel.vue'
export default {
  name: 'Employee',
  components: {
    importExcel
  },
  data() {
    return {
      // 禁用等待响应
      loading: false,
      // 角色ID
      roleIds: [],
      // 角色框
      roleList: [],
      // 树桩列表里的数据
      form: {
        page: 1,
        pagesize: 10,
        keyword: '',
        departmentId: null
      },
      // 分页
      total: 0,
      // 存搜索表单的内容
      input2: '',
      // 存树桩里的内容
      data: [],
      // 树桩结构渲染
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 表单数据
      tableData: [],
      // 导入弹框默认关闭
      showDialog: false,
      // 角色弹窗
      showRoleDialog: false,
      // 分配-员工-角色
      currentEmployeeId: null
    }
  },
  // 渲染页面 //监听输入框事件防抖,只触发最后一次,防抖常用与输入框,节点只执行一次
  created() {
    this.companyDepartment()
    this.keywordChange = debounce(this.keywordChange, 500)
  },
  methods: {
    // 角色事件
    async assignRole(id) {
      // // 分配-员工-角色
      this.currentEmployeeId = id
      // 打开弹窗
      this.showRoleDialog = true
      // 获取多少个数据
      const res = await getRoleListRequest({ pagesize: 1000 })
      console.log(res)
      // 把角色数组给上面的数组,用来循环
      this.roleList = res.data.rows
      // 根据员工id获取到改员工的 所具有的 角色信息
      const res2 = await getEmployeeInfoRequest(id)
      this.roleIds = res2.data.roleIds
    },
    // 角色弹窗取消之后关闭
    close() {
      this.showRoleDialog = false
    },
    // 请求结构的axios
    async companyDepartment() {
      // 发送axios数据
      const res = await companyDepartmentRequest()
      // 下面这个数据是 符合tree组件的  树形结构数据
      // 递归,实现树状图
      this.data = transformListToTree(res.data, 0)
      // 部门id,根据部门查询当前部门及子部门的用户
      this.form.departmentId = this.data[0].id
      // 获取员工列表
      this.getEmployeeList()
      // 获取了树形组件的 所有数据以后， 将第一个数据高亮显示
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.form.departmentId)
      })
    },
    // 封装请求函数
    async getEmployeeList() {
      const res1 = await getEmployeeListRequest(this.form)
      this.tableData = res1.data.rows
      this.total = res1.data.total
    },
    // 分页事件
    handleCurrentChange(val) {
      this.form.page = val
      this.getEmployeeList()
    },
    // 监听事件,点击树形结构,点到那个获取那个id
    currentChange(item) {
      // 返回第一页
      this.form.page = 1
      this.form.departmentId = item.id
      this.getEmployeeList()
    },
    // 监听输入框事件 //上面还用了防抖
    keywordChange() {
      this.getEmployeeList()
      // 手写防抖
    // keywordChange2() {
      // 只执行最后一次， 前面的执行 都需要先清空 定时器。
      // clearTimeout(this.timerId)
      // this.timerId = setTimeout(() => {
      // console.log(111)
      // this.getEmployeeList()
      // }, 1000)
    },
    // 发送导入axios
    importExcel() {
      // 点击打开弹窗
      this.showDialog = true
    },
    // 发送导出axios
    async exportExcel() {
      const res = await userExportRequest()
      saveAs(res, '所有员工信息.xlsx')
    },
    // 删除发送
    async confirm(id) {
      await deleteEmployeeRequest(id)
      this.$message.success({ message: '删除成功' })
      // 刷新页面
      this.getEmployeeList()
    },
    addEmployee() {
      // prototype  __proto__
      // this.$router这个是路由实例对象，上面看不见push方法
      // 去的是 router的构造函数的 原型对象上面去找的，
      // 因为js的底层告诉我们， 原型链上面的属性和方法，都是所有对象实例 所共享的
      this.$router.push('/employee/detail')
    },
    // 分配角色
    async roleIdAssign() {
      const res = await assignRolesRequest({
        id: this.currentEmployeeId,
        roleIds: this.roleIds
      })
      this.showRoleDialog = false
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>

  .employee-container {
  min-height: 50vh;
  display: flex;
  margin: 20px;
  .left {
    padding: 20px;
    flex: 0 0 300px;
    width: 500px;
    border-right: 1px #e4dada solid;
    .l-search {
      margin-bottom: 15px;
    }
  }
  .right {
    padding: 20px;
    // 1 1 0%
    // flex 默认的属性 0 1 auto
    flex: 1;
    .avatar-parent {
      // css改不动的时候，就去改html的结构，加减结构
      width: 100%;
      .avatar-span {
        width: 40px;
        height: 40px;
        background-color: #49ff00;
        display: inline-block;
        color: #fff;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
      }
    }
  }
}

</style>
